<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>客户区域列表</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
    <script type="text/javascript">
        $(function () {
            loadTree(); //初始化数据
            function loadTree() {
                $("#treeTableList").empty();
                $.post("${ctx}/sys/region/listAdminAjaxData",
                       {"parentId": '-1'},
                       function (data) {
                           if (data.state == true && data.list.length > 0) {
                               buildTree(data.list,'-1');
                           } else {
                               alert("初始化失败!");
                           }
                       });
            }

            function buildTree(list,parentId) {
                rendTable(list,parentId);
                $("#treeTable").treeTable({
                      initialState:'expanded',
                      expandLevel: 1,
                      beforeExpand: function ($treeTable, id) {
                          if ($('.' + id, $treeTable).length) { return; }
                          $.post("${ctx}/sys/region/listAdminAjaxData",
                             {"parentId": id},
                             function (data) {
                                 if (data.state == true && data.list.length > 0) {
                                     rendTable(data.list,id,$treeTable);
                                 } else {
                                     alert("无数据!");
                                 }
                             });
                      }
                  });
            }

            function rendTable(list,parentId,child){
                var _tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
                var _table = $("#treeTableList");
                var rows = {};
                for (var i = 0; i < list.length; i++){//循环第一次
                    var _row = list[i];
                    if(parentId==_row.parentId){
                        rows[_row.id] = _row; //说明是当前绘制节点的直接下级
                    }else{
                        var _father = rows[_row.parentId];
                        if(_father){ //若父亲存在
                            _father.hasChild = true;
                        }
                    }
                }
                $.each(rows,function(){
                    _row = this;
                    if(_row.parentId=="-1"){
                        _row.parentId = 0;
                    }
                    if(!child){
                        _table.append(Mustache.render(_tpl, {
                            row: _row
                        }));
                    }else{
                        child.addChilds(Mustache.render(_tpl, {
                            row: _row
                        }));
                    }
                });
            }
            $(".delete").live("click",function(){
                $.ajax({
                           url: "${ctx}/sys/region/delete",
                           type: "post",
                           data: {id:$(this).attr("data-id")},
                           dataType: "json",
                           success: function (data) {
                               if (data.state == true) {
                                   showTip(data.message);
                                   location.reload();
                               } else {
                                   alertx(data.message);
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, '请求错误');
                           }
                       });
            });
            $(".add").live("click",function(){
                $("#id").val("");//清除
                $("#regionName").val("");
                $("#number").val("");
                $("#regionLevel").val($(this).attr("data-level"));
                $("#parentId").val($(this).attr("data-id"));
                $("#editLabel").text("添加固定区域");
                $("#editModal").modal("show");
            });
            $(".edit").live("click",function(){
                $("#id").val($(this).attr("data-id"));//清除
                $("#regionName").val($(this).attr("data-name"));
                $("#number").val($(this).attr("data-id"));
                $("#regionLevel").val("");
                $("#parentId").val("");
                $("#editLabel").text("修改固定区域");
                $("#editModal").modal("show");
            });

            $("#edit-button").click(function(){
               var data = $("#editForm").serialize();
                $.ajax({
                   url: "${ctx}/sys/region/saveAdmin",
                   type: "post",
                   data: data,
                   dataType: "json",
                   success: function (data) {
                       if (data.state == true) {
                           showTip(data.message);
                           //loadTree()
                           location.reload();
                       } else {
                           alertx(data.message);
                       }
                   },
                   error: function (data, state, error) {
                       alertx(data.responseText, null, '请求错误');
                   }
               });
            });
        });
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <!--默认不跳转-->
    <li><a href="${ctx}/sys/region/list">客户区域列表</a></li>
    <shiro:hasPermission name="sys:region:edit"><li><a href="${ctx}/sys/region/form">客户区域添加</a></li></shiro:hasPermission>
    <li class="active"><a href="javascript:void(0);">固定区域列表</a></li>
</ul>
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="editLabel"></h5>
    </div>
    <div class="modal-body">
        <form id="editForm" class="form-horizontal">
            <input type="hidden" name="parentId" id="parentId"/>
            <input type="hidden" name="id" id="id"/>
            <input type="hidden" name="regionLevel" id="regionLevel"/>
            <div class="control-group">
                <label class="control-label">名称：</label>
                <div class="controls">
                    <input name="regionName" id="regionName" maxlength="32" class="input-xlarge"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">编号：</label>
                <div class="controls">
                    <input name="number" id="number" maxlength="32" class="input-xlarge"/>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
        <button class="btn btn-primary" id="edit-button">保存</button>
    </div>
</div>
<table id="treeTable" class="table table-striped table-bordered table-condensed table-hover checkboxcontainer">
    <thead>
    <tr>
        <th style="text-align: center;width: 70%;">
            区域名称
        </th>
        <th style="text-align: center;">
            区域编号
        </th>
        <th style="text-align: center;">
            操作
            <shiro:hasPermission name="sys:region:edit">
            <c:if test="${fns:getUser().admin}">
            <i class="icon icon-pencil add" style="cursor: pointer;" title="添加地区" data-level="0" data-id="-1"></i>
            </c:if>
            </shiro:hasPermission>
        </th>
    </tr>
    </thead>
    <tbody id="treeTableList"></tbody>
</table>
<script type="text/template" id="treeTableTpl">
    <tr class="list" id="{{row.id}}" pId="{{row.parentId}}" hasChild="{{row.hasChild}}">
        <td>
            <span class="viewCell">
                <span>{{row.regionName}}</span>
            </span>
        </td>
        <td style="text-align: center;">
            <span class="viewCell">
                <span>{{row.id}}</span>
            </span>
        </td>
        <td style="text-align: center;">
            <shiro:hasPermission name="sys:region:edit">
                <c:if test="${fns:getUser().admin}">
                    <i class="icon icon-edit edit" style="cursor: pointer;" title="修改" data-id="{{row.id}}" data-name="{{row.regionName}}"></i>
                    <i class="icon icon-trash delete" style="cursor: pointer;" title="删除" data-id="{{row.id}}"></i>
                    <i class="icon icon-pencil add" style="cursor: pointer;" title="添加下级" data-level="{{row.regionLevel}}" data-id="{{row.id}}"></i>
                </c:if>
            </shiro:hasPermission>
        </td>
    </tr>
</script>
</body>
</html>